<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>transform-3D转换</title>
		<style>
			/*重难点:
				1.perspective: 100px; 透视:眼睛距离屏幕的距离. 近大远小.它有两种写法（当盒子不居中时效果明显）:
					1.1写在父盒子上:一般我们写在<body>里,让整个网页产生3D效果. 目前需要掌握的一种写法
					body{
						perspective: 1000px;
					}
					1.2写在transform动画上,会根据动画的变化来进行重新渲染,实际开发中用的比较多.知道有这种写法就行了
					transform: perspective(1000px) rotate3d(0,0,1,72deg);   透视必须写在转换之前！
				2.transform-origin:透视点，基于X轴和Y轴.
			*/
			*{
				margin: 0;
				padding: 0;
			}
			body{
				position: relative;
				perspective: 500px;
				transform-style: preserve-3d;
				backface-visibility: visible;
			}
			div{
				position: absolute;
				top: 0;
				left: 50px;
				float: left;
				width: 300px;
				height: 350px;
				/*margin: 50px auto;*/
			}
			.box-one{
				background: url(img/pig.jpg) 50% 50% no-repeat;
				transition: transform 1s linear;
			}
			.box-two{
				background-color: pink;
				transform: translate(300px);
			}
			.box-three{
				background-color: skyblue;
				transform: translateY(350px) rotateX(90deg);
			}
			.box-one:hover{ 
				transform: rotateZ(90deg);
			}
		</style>
	</head>
	<body>
		<div class="box-one"></div>
		<div class="box-two"></div>
		<div class="box-three"></div>
	</body>
</html>
